<template>
  <el-table
    v-loading="listLoading"
    header-row-class-name="common-list-table-header__v2"
    row-class-name="base-table-row-v3"
    class="multiple-card-table"
    :data="disposeFormListViewTime(data, columns)"
    border>
    <template slot="empty">
      <BaseListForNoData
        v-show="!listLoading"
        table-type="smallTable"
        :notice-msg="$t('common.base.tip.noData')"
      ></BaseListForNoData>
    </template>

    <el-table-column
      v-for="column in columns"
      :key="column.fieldId"
      :label="column.displayName"
      :prop="column.fieldName"
      show-overflow-tooltip
      :min-width="column.minWidth || '120px'">
      <template slot-scope="scope">
      <!-- start 备件 -->
        <template v-if="column.fieldName === 'part'">
           {{ scope.row[column.fieldName]?scope.row[column.fieldName][0].name:'' }}
        </template>
        <!-- end 备件 -->

        <!-- start 附件类型 -->
        <template v-else-if="column.formType === 'attachment'">
          <!-- 客户产品改造中，由于商机管理附件查看文件的功能而更改，但是原先附件一块都是隐藏，产品要求保留隐藏逻辑，所以改动失效,但暂时保留代码（附件的隐藏逻辑在父组件） -->
          <!-- 以下注释的部分为原先的展示，button的部分为客户产品改造这次添加 -->
          <el-button
            type="text"
            class="column-attachment"
            v-if="scope.row[column.fieldName] && scope.row[column.fieldName].length"
            @click="showFilesDialog(scope.row[column.fieldName])">
            {{ scope.row[column.fieldName].length }}
          </el-button>
          <!-- <span class="column-attachment" v-if="scope.row[column.fieldName] && scope.row[column.fieldName].length">
            <i class="iconfont icon-attachment"></i>
            共{{ scope.row[column.fieldName].length }}个附件
          </span> -->
        </template>
        <!-- end 附件类型 -->

        <!-- start 多选 -->
        <template v-else-if="isMulti(column)">
          {{ (scope.row[column.fieldName] || []).join('，') }}
        </template>
        <!-- end 多选 -->

        <!-- start 位置 -->
        <template v-else-if="isHoursRecord && column.fieldName === 'location'">
          <el-button
            type="text"
            size="mini"
            v-if="scope.row.fromType == 2"
            @click="handleEvent('location', data[scope.$index])"
          >{{$t('common.base.view')}}</el-button>
        </template>
        <!-- end 位置 -->
        
        <template v-else-if="column.formType === 'user'">
              
          <template v-if="isOpenData">
            <template v-if="Array.isArray(scope.row[column.fieldName])">
              <open-data v-for="item in scope.row[column.fieldName]" :key="item.staffId" type="userName" :openid="item.staffId"></open-data>
            </template>
            <template v-else>
              <open-data type="userName" :openid="scope.row[column.fieldName] && scope.row[column.fieldName].staffId"></open-data>
            </template>
          </template>
              
          <template v-else>
            {{ $formatFormField(column, scope.row) }}
          </template>
          
        </template>
        
        <!-- start 操作人 -->
        <template v-else-if="column.fieldName === 'userName'">
          <template v-if="isOpenData">
            <open-data type="userName" :openid="scope.row.staffId"></open-data>
          </template>
          
          <template v-else>
            {{ scope.row[column.fieldName] }}
          </template>
        </template>
        <!-- end 操作人 -->
        
        <!-- start 操作人 -->
        <template v-else-if="column.fieldName === 'operatorName'">
          <template v-if="isOpenData">
            <open-data type="userName" :openid="scope.row.operatorStaffId"></open-data>
          </template>
          
          <template v-else>
            {{ scope.row[column.fieldName] }}
          </template>
        </template>
        <!-- end 操作人 -->

        <!-- start 操作时间 -->
        <template v-else-if="column.fieldName === 'updateTime'">
          {{ scope.row[column.fieldName] | fmt_datetime }}
        </template>
        <!-- end 操作时间 -->

        <!-- start 操作 -->
        <template v-else-if="column.fieldName === 'action'">
          <el-dropdown class="dropdown" v-if="showEditBtn(scope.row) || allowDelete">
            <span class="cur-point">
              {{$t('common.base.more')}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="lang-select-dropdown">
              <el-dropdown-item><div @click="handleEvent('view', data[scope.$index])">{{$t('common.base.detail')}}</div></el-dropdown-item>
              <el-dropdown-item><div v-if="showEditBtn(scope.row)" @click="handleEvent('edit', data[scope.$index])">{{$t('common.base.edit')}}</div></el-dropdown-item>
              <el-dropdown-item><div v-if="allowDelete" @click="handleEvent('delete', data[scope.$index])">{{$t('common.base.delete')}}</div></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div v-else>
            <el-button
              type="text"
              size="mini"
              @click="handleEvent('view', data[scope.$index])"
            >{{$t('common.base.detail')}}</el-button>
          </div>
        </template> 
        <!-- end 操作 -->

        <template v-else>
          {{ $formatFormField(column, scope.row) }}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { useFormTimezone } from 'pub-bbx-utils'

export default {
  name: 'multiple-card-table',
  inject: ['showFilesDialog'],
  props: {
    data: {
      type: Array,
      default: () => ([])
    },
    columns: {
      type: Array,
      default: () => ([])
    },
    isHoursRecord: {
      type: Boolean,
      default: false
    },
    allowCreate: {
      type: Boolean,
      default: false
    },
    allowEdit: {
      type: Boolean,
      default: false
    },
    allowDelete: {
      type: Boolean,
      default: false
    },
    listLoading: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    ...useFormTimezone(),
    /** 
    * @description 显示编辑按钮
    * 1.附加组件是工时记录类型时，有编辑权限且是pc端数据
    * 2.普通附加组件有编辑权限
    */
    showEditBtn(row) {
      let editAuth = this.allowEdit;

      // 工时记录类型
      if (this.isHoursRecord) return editAuth && row.fromType == 1;

      return editAuth;
    },
    /** 
    * @description 字段是否是多选类型
    */
    isMulti(field) {
      let { formType, setting = {}} = field;
      if (formType === 'selectMulti') return true;
      if (formType === 'select' && setting.isMulti) return true;
      return false;
    },
    /** 
    * @description 附加组件操作
    */
    handleEvent(action, row) {
      let data = {
        cardInstance: row,
        action
      }

      this.$emit('action', data);
    }
  }
}
</script>

<style lang="scss" scoped>
.multiple-card-table {
  .base-table-row-v3 td {
    .column-attachment {
      .iconfont {
        font-size: 12px;
      }
    }
    .cur-point {
      color: $color-primary-light-6;
    }

    .el-button {
      min-width: auto !important;
      padding: 0;
    }
  }
}
.lang-select-dropdown {
  margin-top: 0!important;
}
</style>
